<template>
    <div class="heade">
        <div class="title">
            <div class="tex"></div>
            <span class="text">配置指引</span>
            <span class="text1">完成以下几步，轻松掌握结算关系配置与报价</span>
            <span class="text2">收起</span>
            <i style="color: #2087D0;margin-left: 7px;" class="el-icon-arrow-up"></i>
        </div>
        <div style="display: flex;">
            <div class="title1">
                <div class="img"><img src="@/static/image/1.png" alt=""></div>
                <div class="text3">
                    <div class="text4">点击“新增结算关系”按钮</div>
                    <div class="text5">如已配置结算关系</div>
                </div>
            </div>
            <div class="title1 tit">
                <div class="img"><img src="@/static/image/2.png" alt=""></div>
                <div class="text3">
                    <div class="text4">点击“新增结算关系”按钮</div>
                    <div class="text5">如已配置结算关系</div>
                </div>
            </div>
            <div class="title1 tit">
                <div class="img"><img src="@/static/image/3.png" alt=""></div>
                <div class="text3">
                    <div class="text4">点击“新增结算关系”按钮</div>
                    <div class="text5">如已配置结算关系</div>
                </div>
            </div>
            <div class="title1 tit">
                <div class="img"><img src="@/static/image/4.png" alt=""></div>
                <div class="text3">
                    <div class="text4">点击“新增结算关系”按钮</div>
                    <div class="text5">如已配置结算关系</div>
                </div>
            </div>
        </div>
        <div class="title2">
            <div class="text6">
                <div class="text7">结算关系配置</div>
                <div>
                    <el-button type="primary" icon="el-icon-sort">批量导入结算关系</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="addGx">新增结算关系</el-button>
                </div>

            </div>
            <div class="line"></div>
            <el-form ref="form" :model="form" label-width="100px">
                <div style="display: flex;" class="title3">
                    <el-form-item label="使用网点">
                        <el-select class="input" v-model="form.networkNameId" placeholder="请选择网点">
                            <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算主体类型">
                        <el-select class="input" v-model="form.typeName" placeholder="请选择">
                            <el-option label="独立网点" value="独立网点"></el-option>
                            <el-option label="二级网点" value="二级网点"></el-option>
                            <el-option label="业务员" value="业务员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算主体">
                        <el-input v-model="form.networkName"></el-input>
                    </el-form-item>
                    <el-form-item label="结算对象类型">
                        <el-select class="input" v-model="form.objectType" placeholder="请选择">
                            <el-option label="二级网点" value="二级网点"></el-option>
                            <el-option label="业务员" value="业务员"></el-option>
                            <el-option label="客户" value="客户"></el-option>
                        </el-select>
                    </el-form-item>
                    <div style="margin-right:32px ;"><button class="btt" style="margin-right: 14px;color: #fff;"
                            @click="seach">查询</button>
                        <button class="btt" style="background-color: #fff;border:1px #333333 solid"
                            @click="clear">重置</button>
                    </div>
                </div>
                <div style="display: flex; justify-content: flex-start;" class="title3">
                    <el-form-item label="结算对象">
                        <el-select class="input" v-model="form.clientId" placeholder="请选择">
                            <el-option v-for="item in clientList" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="结算对象编号" style="margin-left:52px;">
                        <el-input v-model="form.objectCodes" placeholder="最多输入1000条,用逗号隔开" style="width: 285px;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="客户">
                        <el-select class="input" style="margin-right: 652px;" v-model="form.region" placeholder="请选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item> -->
                </div>
            </el-form>
            <div class="title4">
                <div class="text8">当前页共10项</div>
                <button class="bt">批量关联报价</button>
                <button class="bt1" style="width: 120px;height: 42px;background: #2087D0;border-radius: 4px;">批量删除</button>
                <button class="bt1" style="width: 80px;height: 42px;background: #2087D0;border-radius: 4px;">导出</button>
                <button class="bt1"
                    style="width: 220px;height: 42px;background: #2087D0;border-radius: 4px;">导出无结算对象客户</button>
            </div>
            <el-table :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }" ref="multipleTable"
                :data="tableData" tooltip-effect="dark" style="width: 100%">
                <el-table-column type="selection" width="120">
                </el-table-column>
                <el-table-column label="序号" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="networkName" label="结算主体名称" width="120">
                </el-table-column>
                <el-table-column prop="siteCode" label="结算主体编号" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="typeName" label="结算主体类型" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" label="结算对象名称" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="objectCode" label="结算对象编号" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="objectType" label="结算对象类型" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="customerPackageType" label="结算哪些客户的包裹" width="240" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="quotationId" label="已选报价类型" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="isBubble" label="是否个性化计泡" width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="createTime" label="日期" width="150">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="500">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleOpen">查看报价</el-button>
                        <el-button type="text" size="small">查看客户</el-button>
                        <el-button type="text" size="small">个性化计泡</el-button>
                        <el-button type="text" size="small">个性化结算重量</el-button>
                        <el-button type="text" size="small">修改日志</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="display: flex; justify-content: end;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
        <el-drawer :title="title" :visible.sync="drawer" size="50%" :direction="direction" :before-close="handleClose">
            <div class="box" v-show="type == 1">
                <div class="header">
                    <div>
                        <span>辽宁盘锦公司(结算主体)</span>
                        <i class="el-icon-connection"></i>
                        <span>大洼区兰歌小铺的小店(结算对象)</span>
                    </div>
                    <button class="sc" style="width:140px ;" @click="addbj">添加报价</button>
                </div>
                <div class="footer">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="中转费" name="first">
                            <el-row>
                                <el-col :span="24">
                                    <el-form ref="form" :model="form" label-width="80px" class="flex">
                                        <el-form-item label="报价名称">
                                            <el-input v-model="form.name"></el-input>
                                        </el-form-item>
                                        <el-form-item label="活动区域">
                                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                                <el-option label="区域一" value="shanghai"></el-option>
                                                <el-option label="区域二" value="beijing"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <button class="sc" style="width:70px ;">查询</button>
                                    </el-form>

                                </el-col>
                                <el-col>
                                    <div class="title4" style=" margin-bottom: 20px;">
                                        <div class="text8" style="color: #ccc; font-weight:normal ;">当前页共10项</div>
                                        <button class="bt1"
                                            style="width: 120px;height: 42px;background: #2087D0;border-radius: 4px;">批量删除</button>
                                    </div>
                                </el-col>
                                <el-table :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
                                    ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
                                    <el-table-column type="selection" width="120">
                                    </el-table-column>
                                    <el-table-column label="序号" width="120">
                                        <template slot-scope="scope">{{ scope.row.date }}</template>
                                    </el-table-column>
                                    <el-table-column prop="networkName" label="报价名称" width="120">
                                    </el-table-column>
                                    <el-table-column prop="siteCode" label="使用状态" width="120" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="typeName" label="优先级" width="120" show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column prop="name" label="生效时间段" width="120" show-overflow-tooltip>
                                    </el-table-column>
                                </el-table>

                            </el-row>

                        </el-tab-pane>
                        <el-tab-pane label="加收费" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="包仓费" name="third">角色管理</el-tab-pane>
                    </el-tabs>
                </div>
            </div>

            <div class="box" v-show="type == 0">
                <div>
                    <div class="h-h">
                        <span>辽宁盘锦公司(结算主体)</span>
                        <i class="el-icon-connection"></i>
                        <span>大洼区兰歌小铺的小店(结算对象)</span>
                    </div>
                    <div class="h-f">
                    <span>若没有可选的报价信息,可跳转至报价中心新增报价</span>
                    <span>报价中心</span>
                    </div>
                </div>
            </div>

            <div class="box" v-show="type == 3">
                <div>
                    <div class="h-h">
                        <span>辽宁盘锦公司(结算主体)</span>
                        <i class="el-icon-connection"></i>
                        <span>大洼区兰歌小铺的小店(结算对象)</span>
                    </div>
                    <div class="h-f">
                    <span>若没有可选的报价信息,可跳转至报价中心新增报价</span>
                    <span>报价中心</span>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
  
<script>
import { getRelationshipList, getOutletsList, getFinanceList, relationshipSearch } from "@/api/dashboard";
export default {
    data() {
        return {
            form: {
                networkNameId: '', // 使用网点
                typeName: '', // 结算主题类型
                networkName: '', // 结算主题
                objectType: '', // 结算对象类型
                clientId: '', // 结算对象
                objectCodes: '',//结算对象编号
            },
            drawer: false,
            direction: 'rtl',
            pages: {
                pageNum: 1,
                pageSize: 10,
            },
            type:0,
            title:'查看报价',
            activeName: 'first',
            total: 0,
            //网点列表
            networkList: [],
            //结算主题类型列表
            typeList: [],
            // 结算主题列表
            networkNameList: [],
            //结算对象列表
            clientList: [],

            currentPage4: 1,
            //中转费
            transitFees:[],
            // 加收费
            additionalCharges:[],
            // 包仓费
            warehouseFee:[],

            tableData: [],
        }
    },
    created() {
        this.getList()
        this.getOutLet()
        this.getFinance()
    },
    methods: {
        // 获取表格
        getList() {
            getRelationshipList(this.pages.pageNum, this.pages.pageSize).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },
        // 开启抽屉
        handleOpen(){
            this.drawer = !this.drawer
        this.type = 1
        this.title = '查看报价'


        },
        // 关闭抽屉
        handleClose(done) {
            this.drawer = false
            done();
      },
      // 打开添加报价抽屉
      addbj(){
        this.title = '添加报价'
        this.type = 0
      },
        // 获取网点列表
        getOutLet() {
            getOutletsList().then((res) => {
                if (res.code == 200) {
                    this.networkList = res.data
                }

            })
        },
        // 获取结算对象列表
        getFinance() {
            getFinanceList().then((res) => {
                if (res.code == 200) {
                    this.clientList = res.data
                }

            })
        },
        addGx(){
             this.drawer = !this.drawer
            this.title = '新增结算关系'
            this.type = 3

        },
        // 查询
        seach() {
            for (const key in this.form) {
        // Check if the value is empty (assuming empty means falsy in this context)
        if (!this.form[key]) {
          // If the value is empty, delete the key from mxForm
          delete this.form[key];
        }
      }
            relationshipSearch(this.form).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },

        // 重置
        clear() {
           for (const key in this.form) {
        if (key === "pageDate") {
          // 重置 pageDate 的值为默认值
          this.form[key] = { pageNum: 1, pageSize: 10 };
        } else {
          // 清空其他键
          this.form[key] = "";
        }
      }
        },
        
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.getList()

            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pages.pageNum = val
            this.getList()
            console.log(`当前页: ${val}`);
        }
    },

}
</script>
  
<style lang="scss" scoped>
.heade {
    background-color: #F5F5F5;
    padding-top: 26px;
}

.title {
    margin-left: 32px;

    .tex {
        background: linear-gradient(-24deg, #E7F3FB, #8DC0E4, #2087D0);
    }

    .text {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
    }

    .text1 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-left: 22px;
    }

    .text2 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #2087D0;
        margin-left: 16px;
    }
}

.box {
    margin: 20px;
    border-radius: 30px;
    background-color: rgb(245, 240, 240);

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .footer {
        padding: 20px;
    }
}

.sc {
    height: 40px;
    background-color: #2087D0;
    border: none;
    border-radius: 5px;
    color: white;
}

.flex {
    display: flex;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title1 {
    width: 450px;
    height: 108px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
    margin: 22px 0 0 30px;
    display: flex;

    .img {
        margin-left: 24px;
        margin-top: 30px;
    }

    .text3 {
        margin-left: 20px;
        margin-top: 32px;

        .text4 {
            font-size: 18px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
        }

        .text5 {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 8px;
            margin-top: 11px;
        }
    }
}

.tit {
    margin-left: 20px;
}

.title2 {
    width: 1860px;
    height: 1136px;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
    margin-left: 30px;
    margin-top: 20px;
    padding-top: 30px;

    .text6 {
        display: flex;
        margin-left: 30px;
        justify-content: space-between;

        .text7 {
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #333333;
        }

        .bt {
            width: 208px;
            height: 48px;
            background: #2087D0;
            border-radius: 4px;
            border: 1px #2087D0 solid;
            margin-right: 30px;
            margin-top: -10px;
            color: #fff;
        }
    }
}

.line {
    width: 1860px;
    height: 1px;
    background: #D8D8D8;
    border-radius: 1px;
    margin-top: 15px;
}


.title3 {
    justify-content: space-between;
    margin-top: 16px;

    .btt {
        width: 80px;
        height: 42px;
        background: #2087D0;
        border-radius: 4px;
        border: #2087D0;
    }

    .input {
        width: 286px;
    }
}

.title4 {
    display: flex;

    .text8 {
        margin-left: 30px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 10px;
        font-weight: 800;
    }

    .bt {
        margin-left: 23px;
        width: 160px;
        height: 42px;
        background: #2087D0;
        border-radius: 4px;
        border: 1px #2087D0 solid;
        color: #fff;
        font-weight: 500;
    }

    .bt1 {
        margin-left: 16px;
        border: 1px #2087D0 solid;
        color: #fff;
        font-weight: 500;
    }
}</style>
  